<template>
  <div class="wrap">
    <vue-seamless-scroll :data="list" :class-option="classOption" :key="num" class="seamless-warp">
      <div class="img_item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
        <img :src="'/sysFile/fileShow?url=' + item.filePath.replaceAll('\\', '/') " />
        <div class="text_ellipsis mt5">{{ item.name }}</div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { findAllPic } from '@/api/config'
export default {
  name: 'imgs',
  components: { vueSeamlessScroll },
  data () {
    return {
      classOption: {
        step: 0.4,
        waitTime: 1000,
        autoPlay: false,
        // switchDelay: 1000,
        // singleHeight: 40,
        direction: 2,
        hoverStop: true,
        limitMoveNum: 4,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0

      },
      timer: null,
      // 这里加个key值来刷新 滚动 从第一个开始
      num: Math.random(0, 1000),
      list: []
    }
  },
  mounted () {
    this.getList()
  },
  computed: {
    ...mapState({
    })
  },
  watch: {
    list: {
      handler (nl, ol) {
        this.classOption.autoPlay = false
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.num = Math.random(0, 1000)
        this.timer = setTimeout(() => {
          this.classOption.autoPlay = true
          clearTimeout(this.timer)
          this.timer = null
        }, 2000)
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy () {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  methods: {
    async getList () {
      let params = {
        status: 'PUBLISHED',
        pageSize: 10,
        pageNum: this.current
      }
      let res = await findAllPic(params)
      if (res.code === 200) {
        this.list = res.data.items
      }
    },
    toDetail (id) {
      this.$router.push(`/front/detail?type=imgs&id=${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.wrap
  width: 1200px;
  margin 0 auto
.img_item
  text-align center
  display: inline-block;
  margin-right 15px
  cursor pointer
  img
    width 250px
    height 187px
    object-fit cover
.seamless-warp {
  height: 100%;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  margin-top: 20px;
}
</style>
